import React, { useRef } from 'react'
import { getSeriesList, deleteSeriesList } from '@/apis/car/series';
import {
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Divider, message } from 'antd';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import ChangeForm from "./components/change-form"
const brands = () => {
  const actionRef = useRef();
  const columns: ProColumns[] = [
    {title: '名称', dataIndex: 'nameZh'},
    {title: '英文名称', dataIndex: 'nameEn'},
    {title: '描述', dataIndex: 'descriptionZh', hideInSearch: true, ellipsis: true},
    {title: '英文描述', dataIndex: 'descriptionEn', hideInSearch: true, ellipsis: true},
    {title: '创建时间', dataIndex: 'createdAt', hideInForm: true, valueType: 'date'},
    {title: '更新时间', dataIndex: 'updatedAt', hideInForm: true, valueType: 'date'},
    {title: '操作', dataIndex: 'option', valueType: 'option', width: 170,
      render: (_, record, index, action) => {
        return <>
          <ChangeForm key={record.id} initialValues={record} action={action}>
            <Button size='small' type="link"><EditOutlined />编辑</Button>
          </ChangeForm>
          <Divider type="vertical" />
          <Button size='small' type="link" danger onClick={
            async () => {
              let res = await deleteSeriesList(record.id)
              if(res?.code === 0){
                message.success('删除成功')
                action?.reload()
              }
            }
          }><DeleteOutlined />删除</Button>
        </>
      },
    },
  ];
  return (
    <PageContainer>
      <ProTable
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        search={{labelWidth: 70}}
        toolBarRender={(action) => [<ChangeForm key="1" action={action}><Button type="primary"><PlusOutlined />新增车系</Button></ChangeForm>]}
        columns={columns}
        request={async (params, sorter, filter) => {
          const res = await getSeriesList(params);
          if(!res){
            return {
              data: [],
              total: 0,
              success: false,
            };
          }
          const { data, code } = res
          const { total } = data
          return {
            data: data?.data || [],
            total,
            success: code === 0,
          };
        }}
      />
    </PageContainer>
  )
}

export default brands